<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css"/>

    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="dist/module/flow-chart-manage/libs/bootstrap.min.js"></script>
    <style>
        #container{
            height:1000px;
            background:#ccc;
        }
    </style>
</head>
<body>
<div id="container">
    <span>这是一个很长的div,使页面出现滚动条。</span>
    <h2>使用Bootstrap创建多模态框</h2>
    <div id="example1"  style="z-index: 999" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>这是第一个模态框</h3>
                </div>
                <div class="modal-body">
                    <h4>第一个模态框中的文本</h4>
                    <p>你可以在这添加一些文本。</p>
                </div>
                <div class="modal-footer">
                    <a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">弹出第二个模态框</a>
                    <a href="#" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
    <div id="example2" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>这是第二个模态框</h3>
                </div>
                <div class="modal-body">
                    <h4>第二个模态框中的文本</h4>
                    <p style="height:900px">你可以在这添加一些文本。</p>
                </div>
                <div class="modal-footer">
                    <a data-toggle="modal" href="#example3" class="btn btn-primary btn-large">弹出第三个模态框</a>
                    <a href="#" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
    <div id="example3" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>这是第三个模态框</h3>
                </div>
                <div class="modal-body">
                    <h4>第三个模态框中的文本</h4>
                    <p>你可以在这添加一些文本。</p>
                </div>
                <div class="modal-footer">
                    <!--<a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">发动演示模态框</a>-->
                    <a href="#" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
    <p><a data-toggle="modal" href="#example1" class="btn btn-primary btn-large">发动演示模态框</a></p>
</div>
<script>

</script>
</body>

</html>